<template>
	<div>
		<h2>周末去哪儿</h2>
		<div class = "con" v-for = "item of weekendList" :key = "item.id">
			<img :src="item.imgUrl" :alt="item.title">
			<h3>{{item.title}}</h3>
			<p>{{item.desc}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		name : 'weekend',
		props : ["weekendList"],
		data () {
			return {
			}
		}
	}
</script>

<style scoped lang = "less">
	@import "~css/variable.less";
	h2 {
		height:.8rem;
		line-height:.8rem;
 		padding-left:.2rem;
		background: #eee;
	}

	.con {
		&:first-of-type{
			img {
				margin-top:0;
			}
		}
		img {
			display: block;
			width:100%;
			margin:.3rem 0 .2rem;
			
		}

		h3 {
			font-size:.28rem;
			color:#212121;
			line-height:.48rem;
			padding-left:.2rem;
		}

		p {
			font-size: .24rem;
    		line-height: .42rem;
    		color: #616161;
    		padding-left:.2rem;
		}
	}
</style>